<template>
	<div class="body-hp" style="overflow-y:auto;" id="body-hp">
		<HeaDer></HeaDer>
    <div class="first flex" style="background-color:#F8F9FB">
			<div style="font-size: 18rem;
			color: #617184;
			margin-right: 10rem;
			display: flex;
			justify-content: center;
			align-items: center;">
				当前位置:
			</div>
      <el-breadcrumb separator-class="el-icon-arrow-right" style="display: flex;
			justify-content: center;
			align-items: center;color:#617184">
        <el-breadcrumb-item :to="{ path: '/hp' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/platformlist' }"> 园区平台</el-breadcrumb-item>
				<el-breadcrumb-item>{{deptName}}</el-breadcrumb-item>
        <!-- <el-breadcrumb-item>{{ list }}</el-breadcrumb-item> -->
      </el-breadcrumb>
    </div>
    <div class="flex center second">
			<!-- 左 -->
      <div>
				<div>
					<el-descriptions :title="deptName">
					</el-descriptions>
				</div>
				<div class="forthf">
					<div class="forths">企业简介</div>
					<img src="../../assets/images/jianshili/111.png" style="width:80rem">

					<div class="fortht" v-if="deptCompanyProfile != null">
						{{ deptCompanyProfile }}
						<img :src='url!=null?url:require("../../assets/images/pl-img_12.jpg") ' style="margin-top:10rem;width:516rem;height:380rem">
					</div>
					<div class="fortht" v-else>
						暂无介绍

					</div>
				</div>
        <div class="forthf">
					<div class="forths">经营范围</div>
					<img src="../../assets/images/jianshili/111.png" style="width:80rem">
					<div class="fortht">
						{{ content == null ? '暂无介绍' : content }}
					</div>

				</div>
        <div class="forthf">
					<div class="forths">产品介绍</div>
					<img src="../../assets/images/jianshili/111.png" style="width:80rem">
					<ul class="main-pl">
						<div class="row-pl" v-if="qualificationList.length>0">
							<li v-for="item in qualificationList" :key="item.item">
								<div class="left-pl">
									<img :src="(item.templateUrl == null || item.templateUrl == '' ? productUrl : item.templateUrl)"  alt="">
								</div>
								<div class="right-pl">
									<div class="title-pl">
										{{item.productName}}
									</div>
									<div class="content-pl">
										{{item.productRemark}}
									</div>
									<div class="bottom-pl">
										<div class="left-pl">
											<span :class="item.class">{{item.productType}}</span>
											<!-- <i>{{item.name2}}</i> -->
										</div>
										<!-- <button class="btn-pl">立即查看</button> -->
									</div>
								</div>
							</li>
						</div>
						<div class="fortht" v-else>
							暂无介绍
						</div>
					</ul>
				</div>
      </div>
			<!-- 右 -->
      <div class="thrid" style="margin-bottom:20px">
				<div style="margin-bottom:20px">
					<div class="bgg">
						<div class="bggf">机构信息</div>
						<div style="margin-bottom:10rem;">
							机构名称: {{ deptName }}
						</div>
						<div style="margin-bottom:10rem;">
							机构性质: {{ formatterNature(deptNature) }}
						</div>
						<div style="margin-bottom:10rem;">
							所属行业: {{ formatterIndustry(deptIndustry) }}
						</div>
						<div style="margin-bottom:10rem;">
							机构地址: {{deptAddress }}
						</div>
					</div>
				</div>
				<div style="margin-bottom:20px;height:791px;overflow-y: auto;">
					<div class="bggg">
						<div class="bggf">荣誉资质信息</div>
						<!-- <div style="margin-bottom:10rem;" v-for="item in itemss" :key="item.itemss">
							{{ item.tit }}: {{ item.cont }}
						</div> -->
						<div v-if="managementList.length > 0"  style="margin-bottom:5rem;">
							<img  v-for="item in managementList" :key="item.id" :src="(item.fileUrl == null || item.fileUrl == '' ? honorUrl : item.fileUrl)" style="width:390rem;height:240rem">
              			</div>
						  <el-empty :image-size="200" v-if="managementList.length == 0"></el-empty>
					</div>
				</div>
      </div>
   </div>
		<FooTer></FooTer>

	</div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import {publicList} from "@/api/qualificationInfo/qualification";
import { getDept} from "@/api/system/dept";
import { listHonorManagementOrgId } from "@/api/honor/management";
export default {
	dicts: ['enterprise_nature', 'customer_industry_serve','product_type'],
	data () {
		return {
			honorUrl: require('../../assets/images/iso9001.jpg'),
			productUrl:require("../../assets/images/pl-img_03.jpg"),
			managementList: [],
			qualificationList:[],
			total:0,
			// 查询参数
			queryParams: {
        		pageNum: 1,
        		pageSize: 4,
        		productType: null,
        		productNo: null,
        		productName: null,
        		productStatus: null,
        		examineStatus: null,
        		classificationId: null,
        		organizationName: null
      		},
			queryParamsHonor: {
        		pageNum: 1,
        		pageSize: 4,
				status:null,
        		organizationId: null,
      		},
			deptName:null,
			deptNature:null,
			deptAddress:null,
			deptIndustry:null,
			deptPhone:null,
			deptContacts:null,
      url:null,
			deptCompanyProfile:null,
      		picture:require("../../assets/images/pl-img_12.jpg"),
			activeIndex: '1',
			img_logo:require("../../assets/images/jianshili/hp_logo.png"),

		};
	},
  components: {
		HeaDer,
		FooTer,

	},
	methods: {
		//查询当前机构荣誉资质
		getHonorList() {
			this.managementList = [];
			this.queryParamsHonor.organizationId = this.$route.params.platId;
			this.queryParamsHonor.status = "0";
			listHonorManagementOrgId(this.queryParamsHonor).then(response => {
				this.managementList = response.rows;
			});
		},
		//查询当前机构主营产品
		getQualificationList(){
				this.qualificationList = [];
				this.queryParams.organizationId = this.$route.params.platId
				publicList(this.queryParams).then(response => {
					console.log(response)
    	      		this.qualificationList = response.rows;
    	      		this.total = response.total;
    	    	});
		},
		getDeptInfo(){
			getDept(this.$route.params.platId).then(response => {
				this.deptCompanyProfile = response.data.companyProfile
				this.content = response.data.businessScope
                this.deptName = response.data.deptName
				this.deptAddress = response.data.address
				this.deptNature = response.data.nature
				this.deptIndustry = response.data.industry
				this.deptPhone = response.data.phone
				this.deptContacts = response.data.contacts
        this.url = response.data.url
            });
		},

		formatterNature(value) {
			var type = "";
			this.dict.type.enterprise_nature.forEach(item => {
				if (item.value == value)
					type = item.label;
			});
			return type;
		},
		formatterIndustry (value) {
			var type = "";
			this.dict.type.customer_industry_serve.forEach(item => {
				if (item.value == value)
					type = item.label;
			});
			return type;
		},
		formattertType (value) {
			var type = "";
			this.dict.type.product_type.forEach(item => {
				if (item.value == value)
					type = item.label;
			});
			return type;
		},
	  // setHtmlFonts(){
	  // 		  var rootElement = document.querySelector('html');
	  // 		  rootElement.style.fontSize= "1px";
	  // },
	  // resizeWindow(){
		//   var screenWidth = window.innerWidth;
		//   var Zoom = screenWidth / 1920;
		//   document.body.style.zoom = Zoom.toFixed(2);
	  // },
	  // resizeWindow(){
		//   (function(doc, win) {
		//       var docEl = doc.documentElement,
		//           resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		//           recalc = function() {
		//               var clientWidth = docEl.clientWidth;
		//               if (!clientWidth) return;
		//               docEl.style.fontSize = 1 * (clientWidth / 1920) + 'px';
		//           };

		//       if (!doc.addEventListener) return;
		//       win.addEventListener(resizeEvt, recalc, false);
		//       doc.addEventListener('DOMContentLoaded', recalc, false);
		//   })(document, window);
	  // },
	  tab_mouseEnter(e){
		e.target.className = "on";
	  },
	  tab_mouseLeave(e){
		  e.target.className = "";
	  },


    },
	created() {
		this.getHonorList();
		this.getDeptInfo();
		this.getQualificationList();
	  // this.setHtmlFonts();
	  // this.resizeWindow();
	  // this.resizeWindow();
	},
}
</script>

<style lang="scss" scoped>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}
ol,ul {
	list-style: none;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
.flex{
  display: flex;
}
.center{
  display: flex;
  justify-content: space-around
}
.main-pl{
	width: 100%;
	padding-bottom: 66rem;
}
.main-pl>.row-pl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-bottom: 50rem;
}
.main-pl li{
	width: 49%;
	height:176rem;
	background: url(../../assets/images/pl-bg1_03.jpg) no-repeat scroll;
	background-size: 100% 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding-left: 18rem;
	padding-right: 30rem;
	margin-bottom: 33rem;
}
.main-pl li>.left-pl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}
.main-pl li>.left-pl>img{
	width: 82rem;
	height: 120rem;
}
.main-pl li>.right-pl{
	padding-top: 20rem;
	padding-left: 15rem;
}
.main-pl li>.right-pl>.title-pl{
	font-size: 18rem;
	margin-bottom: 15rem;
}
.main-pl li>.right-pl>.content-pl{
	overflow-y: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 14rem;
	margin-bottom: 30rem;
}
.main-pl li>.right-pl>.bottom-pl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	font-size: 14rem;
}
.main-pl li>.right-pl>.bottom-pl>button{
	font-size: 14rem;
	color: #35a266;
	border: solid 1px #35a266;
	background-color: white;
	padding: 4rem 15rem;
	cursor: pointer;
}
.main-pl li>.right-pl>.bottom-pl>.left-pl>span{
	background-color: #f0eedb;
	color: #62667d;
	padding:2rem 12rem;
	margin-right: 10rem;
}
.main-pl li>.right-pl>.bottom-pl>.left-pl>span.color-gold{
	background-color: #f0eedb;
}
.main-pl li>.right-pl>.bottom-pl>.left-pl>i{
	background-color: #ebfff4;
	color: #087d40;
	padding:2rem 12rem;
	font-style: normal;
	width: 130px; /* 限制文本容器的宽度 */
  white-space: nowrap; /* 保持文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略符号来表示文本被截断 */
	font-size: 14rem;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover{
	color: #35a266;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
	background-color: #35a266;
}
// 没有实现
::v-deep .main-pl li > .right-pl > .bottom-pl > .left-pl > i{
	width:140px !important;
	display: inline-block;
}
::v-deep .main-pl li>.right-pl>.bottom-pl>.left-pl{
	display: flex;
	align-items: center;
}
.bg{
  background:url(../../assets/images/jianshili/xq_03.png) no-repeat scroll;
  background-size:100%
}
.bgg{
  background:url(../../assets/images/jianshili/xq_06.png) no-repeat scroll;
  background-size:100%;
  width:410rem;
  height:281rem;
  padding:10rem;
  .bggf{
    color:#fff;
    margin-bottom:40px;
    font-size:20rem
  }
}
.bggg{
  background:url(../../assets/images/pl-img_11.png) no-repeat scroll;
  background-size:100%;
	width:410rem;
  height:791rem;
  padding:10rem;
  .bggf{
    color:#fff;
    margin-bottom:40px;
    font-size:20rem;
  }
}
.bgg2{
  background:url(../../assets/images/jianshili/xq-img_03.png) no-repeat scroll;
  background-size:100%;
  width:410rem;
  height:194rem;
  padding:10rem;
  margin-top:40rem;
  .bgg2f{
    color:#fff;
    margin:30px 0px 10px 10px;
    font-size:30rem;
  }
}
.first{
  width: 100%;
  // border-bottom:5px solid #F0F0F0;
  padding:20rem 20rem 20rem 200rem;
}
.second{
  margin-left: auto;
  margin-right: auto;
  width:1532rem;
  padding:5rem;
  margin-top:30rem;
	margin-bottom: -50rem;
}
.thrid{
  .thridf{
    width:410rem;
    height:198rem;
    padding:10rem;
    // margin-bottom:40px;
    .thrids{
      color:#fff;
      margin-bottom:40px;
      font-size:20rem;
    }
    .thridt{
      margin-bottom:10rem;
    }
  }
}
.forthf{
    margin:30rem 50rem 0rem 0rem;
    .forths{
      font-weight:bold;
      color:#1E1E1E;
      font-size:20rem;
    }
    .fortht{
      color:#1E1E1E;
      font-size:17rem;
      line-height:35rem;
      text-indent: 2em;
    }
  }
.forth{
  display:flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  width:1532rem;
  padding:5rem;
  margin-top:30rem;
}
.fif{
  margin-left: auto;
  margin-right: auto;
  width:1532rem;
  padding:5rem;
  // margin-top:30rem;
  margin-bottom:30rem;
  .fiff{
    color:#1E1E1E;
    font-size:17rem;
    margin-bottom:10px;
    margin-bottom:20px;
  }
  .fifs{
    background-color:#EEF4F0;
    width:1100rem;
    padding:20rem;
    color:#90C5A6;
    font-size:17rem;
  }
}

/* 头尾公共样式 */
body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote，th,td{margin:0;padding:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
.el-menu.el-menu--horizontal{
	border-bottom: none;
}
.el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 3rem solid #33b843;
    color: #33b843;
}
.el-menu--horizontal > .el-menu-item{
	height: 52rem;
	line-height: 52rem;
	font-size: 22rem;
	font-weight: 600;
	color: #262827;
	padding: 0 4rem;
	margin: 0 20rem;
	font-size: 20rem;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal .el-menu-item:not(.is-disabled):focus{
	color:#33b843;
}
.top-hp{
	height:96rem;
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	background-color: white;
}
.logo-hp{
	height: 45rem;
	margin-top: 10rem;
}
.logo-hp img{
	height:100%;
}
.row-hp{
	width: 1532rem;
	margin: auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.top-right-hp{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

}
.top-right-hp .btn-hp{
	background: none;
	border: none;
	cursor: pointer;
}
.footer-hp{
	width: 100%;
	/* height:285rem; */
	background-color: #000105;
	color: white;
}
.footer-main-hp{
	width:1532rem;
	margin: auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	font-size: 16rem;
	padding-right: 95rem;
	padding-top: 34rem;
	padding-bottom: 50rem;
}
.footer-main-hp>.right-hp>b{
	font-size: 16rem;
	display: block;
	margin-bottom: 11rem;
	color: #cdcdcd;
}
.footer-main-hp>.left-hp>p{
	line-height: 24rem;
	color: #adadad;
}
.footer-main-hp>.left-hp>p>a{
	color: #adadad;
}
.footer-main-hp>.right-hp>p{
	line-height: 31rem;
}
.footer-main-hp>.right-hp>p>a{
	color: #adadad;
}
.el-divider{
	background-color: #292e31;
}
.bottom-line-hp{
	width:100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 16rem;
	color: #aaaaaa;
}
.bottom-line-hp>span{
	display: inline-block;
	width: 100%;
	height: 50rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* 头尾公共样式 end */
/* 回到顶部 */
.toTop-hp{
	width:78rem;
	position: fixed;
	right: 9rem;
	bottom:328rem;
	z-index: 100;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
}
.toTop-hp>li{
	width: 78rem;
	height: 78rem;
	background-color: black;
	margin-bottom: 8rem;
}
.toTop-hp>li.li-enter-leave>.erweima-hp{
	width:100%;
	height: 100%;
}
.toTop-hp>li.li-enter-leave>.erweima-hp>.content-hp{
	width: 192rem;
	height: 100%;
	background-color: #26a740;
}
.toTop-hp>li.li-enter-leave.on>.erweima-hp{
	display: block;
	/* animation:move2 .3s ease-in-out forwards; */
	transform: translate(10rem,0);
	opacity: 1;
}
.toTop-hp>li.li-enter-leave.on2>.erweima-hp{
	display: block;
}

::v-deep #app-hp [class^=el-icon-]{
	display: none;
}
/* 回到顶部 end*/
.body-hp{
	height:100%;
	width:100%;
	/* font: 14rem arial; */
	font-size: 14rem;
	font-family:PingFang SC,Microsoft YaHei,Arial,sans-serif;
	color:#676767;
}

.banner-hp{
	width: 100%;
	height: 607rem;
	background-color: #eee;
}
.top-content-hp{
	width: 100%;
	height: 141rem;
	position: relative;
	background-color: white;
	box-shadow: 8rem 8rem 12rem rgba(230,230,230,.8);
	margin-top: -49rem;
}
.top-content-hp::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	box-shadow: -2rem 8rem 12rem rgba(230,230,230,.8);
}
.txt-center-hp{
	width: 100%;
	height: 170rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.columns-tab-hp{
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	margin-bottom: 90rem;
}
.columns-tab-hp>li{
	height: 453rem;
	width: 320rem;
	position: relative;
	background-color: #f4f7fc;
	border-radius: 10rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 44rem;
	cursor: pointer;
}
.columns-tab-hp>li>img{
	width: 172rem;
	height: 182rem;
}
.columns-tab-hp>li>.bottom-hp{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40rem;
	background-color:#26a740;
	border-bottom-left-radius: 10rem;
	border-bottom-right-radius: 10rem;
	font-size: 16rem;
	color: white;
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 0 15rem 0 39rem;
}
.columns-tab-hp>li.on{
	background-color: white;
	animation:move .2s ease-in-out forwards;
}
.columns-tab-hp>li.on::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	box-shadow: -6rem 0 14rem rgba(230,230,230,.5);
}
.columns-tab-hp>li.on::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	box-shadow: 6rem 0 14rem rgba(230,230,230,.5);
}
.columns-tab-hp>li.on>.bottom-hp{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.columns-tab-hp>li>.bottom-hp>i{
	transform:rotateY(180deg) rotateZ(-90deg);
}
.columns-tab-hp>li>dl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 34rem;
	padding-right: 34rem;
}
.columns-tab-hp>li>dl>dt{
	padding: 34rem 0 30rem;
	font-size: 26rem;
}
.columns-tab-hp>li>dl>dd{
	font-size: 16rem;
}
@keyframes move{
	0%{
		transform: translate(0,0);
	}
	100%{
		transform: translate(0,-5rem);
	}
}
@keyframes move2{
	0%{
		display: block;
		transform: translate(0,0);
		opacity: 0;
	}
	100%{
		transform: translate(30rem,0);
		opacity: 1;
	}
}
@keyframes move3{
	0%{
		transform: translate(30,0);
		opacity: 1;
	}
	100%{
		transform: translate(0,0);
		opacity: 0;
		display: none;
	}
}
.banner2-hp{
	width: 100%;
	height:601rem;
	background-color:#eee;
}
.moreServices-hp{
	height: 498rem;
	width: 100%;
}

</style>
